<template>
  <div class="page">
    <div class="config-manage vux-1px-b" @click="toConfigManage()">
      <span>配置管理</span>
      <img src="../../assets/img/ic/skip@2x.png" alt="">
    </div>
    <div class="modify-pwd vux-1px-b" @click="toResetPwd()">
      <span>修改密码</span>
      <img src="../../assets/img/ic/skip@2x.png" alt="">
    </div>
    <div class="footer-box" @click="showMaskForm=true">退出登录</div>
    <MaskForm v-show="showMaskForm" :layerHeadTitle="layerHeadTitle" :layerBodyTip="layerBodyTip" @sureBtnEvent="sureBtnEvent" @closeMaskForm="closeMaskForm"></MaskForm>
  </div>
</template>

<script>
  import MaskForm from '@/components/MaskForm'
  export default {
    components:{
      MaskForm
    },
    data(){
      return {
        title: '设置',
        layerHeadTitle: '退出登录',
        layerBodyTip: '此操作会退出系统，是否继续？',
        showMaskForm: false,
        testData: 'test-data'
      }
    },
    created(){
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
    },
    methods:{
      sureBtnEvent(){
        console.log(this.testData);
      },
      closeMaskForm(){
        this.showMaskForm = false
      },
      toConfigManage(){ //配置管理页面
        this.$router.push({path:'/configManage'})
      },
      toResetPwd(){ //修改密码页面
        this.$router.push({path:'/resetPwd'})
      }
    }
  }
</script>

<style lang="less" scoped>
.config-manage,.modify-pwd{
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
  height: 100px;
  line-height: 100px;
  background: #ffffff;
  img{
    height: 48px;
    width: 48px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -20px;
  }
  span{
    font-size: 30px;
    color: #262626;
  }
}
.footer-box{
  position: fixed;
  bottom: 0;
  background-color: @blue;
  height: 100px;
  line-height: 100px;
  width: 100%;
  text-align: center;
  color: @white;
  font-size: 34px;
  letter-spacing: 1.1px;
}
</style>
